<template>
	<Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <h1>
            <img class="logo" :src="require('../../../images/logo.png')" alt="">
            <span>慢病管理云平台</span>
        </h1>
		<Menu width="auto" :class="menuitemClasses">
			<Submenu name="1">
				<template slot="title">
					<Icon :size="20" type="ios-body-outline" />串者管理
				</template>
				<MenuItem name="1-1" to="/customer">患者列表</MenuItem>
				<MenuItem name="1-2" to="/watchData">监测记录</MenuItem>
				<!--  -->
			</Submenu>
			<Submenu name="2">
				<template slot="title">
					<Icon :size="20" type="ios-medkit-outline" />健康干预
				</template>
				<MenuItem name="2-1" to="/healthIntervention">健康干预</MenuItem>
				<MenuItem name="2-2" to="/healthInterventionHistory">干预记录</MenuItem>
			</Submenu>
			<Submenu name="3">
				<template slot="title">
					<Icon :size="20" type="ios-heart-outline" />健康随访
				</template>
				<MenuItem name="3-1" to="/plan">制定计划</MenuItem>
				<MenuItem name="3-2" to="/arrangeTask">随访任务</MenuItem>
				<MenuItem name="3-3"  to="/arrangeHistory">随访记录</MenuItem>
				<MenuItem name="3-4"  to="/cancelHistory">取消记录</MenuItem>
			</Submenu>
			<Submenu name="4">
				<template slot="title">
					<Icon :size="20" type="ios-barcode-outline" />营销管理
				</template>
				<MenuItem name="4-1">会员券</MenuItem>
				<MenuItem name="4-2" to="/coupon">优惠券</MenuItem>
			</Submenu>
			<Submenu name="5">
				<template slot="title">
					<Icon :size="20" type="ios-flower-outline" />消费管理
				</template>
				<MenuItem name="5-1">消费记录</MenuItem>
			</Submenu>
			<Submenu name="6">
				<template slot="title">
					<Icon :size="20" type="ios-cog-outline" />系统设置
				</template>
				<MenuItem name="6-1" to="/careType">随访类型</MenuItem>
				<MenuItem name="6-2" to="/careTemplate">随访模板</MenuItem>
				<MenuItem name="6-3" to="/interventionTemplate">干预模板</MenuItem>
				<MenuItem name="6-4" to="/organization">机构设置</MenuItem>
				<MenuItem name="6-5" to="/tag">标签管理</MenuItem>
				<MenuItem name="6-6" to="/param">参数设置</MenuItem>
			</Submenu>

            <Submenu name="7">
				<template slot="title">
					<Icon :size="20" type="ios-cog-outline" />系统管理
				</template>
				<MenuItem name="7-1" to="/system/role">角色管理</MenuItem>
				<MenuItem name="7-2" to="/system/account">账号管理</MenuItem>
			</Submenu>
		</Menu>
	</Sider>
</template>
<script>
import { mapState, mapMutations } from '@lib/x_.js'
export default {
	data() {
		return {
            isCollapsed: false
        }
	},
	computed: {
		...mapState(['hidemenu','menus']),
		menuitemClasses() {
			return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
		}
	},
	methods: {
		collapsedSider() {
			this.$refs.side1.toggleCollapse()
		}
	}
}
</script>

<style lang='scss'>
.root {
    .logo{
        position: relative;
        top: 10px;
    }
    // #EAEDF1
    h1{
        color: #fff;
        font-size: 16px;
        line-height: 59px;
        height: 59px;
        text-align: center;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        position: relative;
        z-index: 99;
        // border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
    }
	.ivu-menu-vertical .ivu-menu-item:hover,
	.ivu-menu-vertical .ivu-menu-submenu-title:hover {
		color: rgba(255, 255, 255, 0.5);
	}
	.ivu-menu {
		color: #fff;
		a {
			color: #fff;
		}
	}
	.ivu-menu-submenu {
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
    }
    .ivu-menu-vertical.ivu-menu-light:after{
        display: none;
    }
    
}
</style>